<template>
	<view>
		<view class="maturity-header">
			<view class="header-det">
				<view class="header-n">
					<view class="num">¥5600</view>
					<view>总额度</view>
				</view>
				<view class="header-n">
					<view class="num">¥1200</view>
					<view>可用额度</view>
				</view>
			</view>
			<view class="matur-text">推广锁定好友涨额度</view>
		</view>
		<view class="matur-earnings">
			<view class="earnings">
				<view class="num-pric">56</view>
				<view>今日收益</view>
				<view class="xq">详情</view>
			</view>
			<view class="lines_"></view>
			<view class="earnings">
				<view class="num-pric">12</view>
				<view>累计收益</view>
				<view class="xq">详情</view>
			</view>
		</view>
		<!-- 钱包 余额 -->
		<view class="wallet-balance">
			<view class="wallet">
				<view class="num_pric">¥56.8</view>
				<view>钱包余额</view>
			</view>
			<view class="coin-change">
				<view class="coin come-style">兑换</view>
				<view class="rechange come-style">充值</view>
			</view>
		</view>
		<!-- 分期还款 -->
		<view class="installment-repayment">
			<view class="repament-list">
				<view>
					<view>已用分期值</view>
					<view class="num-pric">¥240</view>
				</view>
				<view class="line_"></view>
				<view>
					<view>待还分期值</view>
					<view class="num-pric">¥440</view>
				</view>
				<view class="line_"></view>
				<view>
					<view>应还分期值</view>
					<view class="num-pric">¥240</view>
				</view>
			</view>
			<view class="repayment-buttom">立即还</view>
		</view>
		<!-- 订单总量  已买订单 已卖订单-->
		<view class="order-total">
			<view>
				<view>订单总量</view>
				<view class="num">14</view>
			</view>
			<view class="line_"></view>
			<view>
				<view>已买订单</view>
				<view class="num">4</view>
			</view>
			<view class="line_"></view>
			<view>
				<view>已卖订单</view>
				<view class="num">10</view>
			</view>
		</view>
		 <!-- 商品投资 我的投资 共享分期值 -->
		 <view class="my-inverst">
			 <view class="inverst">
				 <image src="/static/home/icon/insvers03.png"></image>
				 <view>商品投资</view>
			 </view>
			 <view class="inverst" @tap="inverst">
				 <image src="/static/home/icon/insvers01.png"></image>
				 <view>我的投资</view>
			 </view>
			 <view class="inverst">
				 <image src="/static/home/icon/insvers02.png"></image>
				 <view>共享分期值</view>
			 </view>
		 </view>
		<view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 我的投资
			inverst(){
				uni.navigateTo({
					url:'/pages/member/invest/invest'
				})
			},
		}
	}
</script>

<style lang="less">
	.maturity-header {
		width:686rpx;
		height:373rpx;
		background:rgba(255,94,77,1);
		border-radius:16rpx;
		margin:32rpx auto 0 auto;
		padding:86rpx 91rpx 0rpx;
		.header-det {
			display:flex;
			justify-content: space-between;
			margin-bottom:55rpx;
			.header-n {
				text-align:center;
				font-size:24rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
				.num {
					font-size:48rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color:rgba(255,255,255,1);
				}
			}
		}
		.matur-text {
				width:356rpx;
				height:77rpx;
				line-height:77rpx;
				text-align:center;
				margin:0rpx auto 0 auto;
				background:rgba(255,94,77,1);
				border-radius:16rpx;
				border:2rpx solid rgba(255,255,255,0.34);
				font-size:24rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
			}
		}
		// 今日收益 和累计收益
		.lines_ {
			width:2rpx;
			height:48rpx;
			margin-top:80rpx;
			background:rgba(204,204,204,0.36);
		
		}
		.matur-earnings {
			width:686rpx;
			max-height:198rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			margin:25rpx auto;
			display:flex;
			padding:18rpx 116rpx 39rpx;
			justify-content: space-between;
			.earnings {
				font-size:24rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(109,114,120,1);
				text-align:center;
				.num-pric {
					font-size:48rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color:rgba(255,94,77,1);
				}
				.xq {
					width:106rpx;
					height:42rpx;
					margin-top:6rpx;
					line-height: 42rpx;
					background:rgba(255,94,77,0.08);
					border-radius:16rpx;
					font-size:24rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(255,94,77,1);
				}
			}
		}
		// 钱包余额
		.wallet-balance {
			display:flex;
			justify-content: space-between;
			text-align:center;
			width:686rpx;
			height:226rpx;
			margin:auto;
			padding:65rpx 45rpx 0 69rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			.wallet {
				height:33rpx;
				font-size:24rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(109,114,120,1);
				.num_pric {
					font-size:48rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color:rgba(255,94,77,1);
				}
			}
			.coin-change {
				display:flex;
				margin-top:14rpx;
				.come-style {
					width:145rpx;
					height:67rpx;
					line-height:67rpx;
					text-align:center;
					background:rgba(255,94,77,0.1);
					border-radius:16px;
					font-size:24rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
				}
				.coin {
					color:rgba(255,94,77,1);
					background:rgba(255,94,77,0.1);
				}
				.rechange {
					color:rgba(255,255,255,1);
					background:rgba(255,94,77,1);
					margin-left:23rpx;
				}
			}
	
		}
		.installment-repayment {
			width:686rpx;
			max-height:306rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			padding-bottom:43rpx;
			margin:25rpx auto 0rpx auto;
			.repament-list {
				display:flex;
				justify-content: space-between;
				text-align:center;
				padding:59rpx 54rpx 0;
				.line_ {
					width:2rpx;
					height:48rpx;
					margin-top:16rpx;
					background:rgba(204,204,204,0.36);

				}
				view {
					font-size:24rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(109,114,120,1);
				}
				.num-pric {
					font-size:40rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color:rgba(255,94,77,1);
				}
			}
			.repayment-buttom {
				width:588rpx;
				height:77rpx;
				margin:38rpx auto 43rpx; 
				line-height:77rpx;
				text-align:center;
				background:rgba(255,94,77,0.1);
				border-radius:16rpx;
				font-size:30rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(255,94,77,1);
			}
		}
		.order-total {
			width:686rpx;
			height:198rpx;
			margin:25rpx auto 25rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			padding:59rpx 66rpx 0;
			text-align:center;
			display:flex;
			justify-content: space-between;
			font-size:24rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(109,114,120,1);
			.line_ {
				width:2rpx;
				height:48rpx;
				background:rgba(204,204,204,0.36);
				margin-top:16rpx;
			}
			.num {
				font-size:40rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(255,94,77,1);
			}
		}
		.my-inverst {
			width:686rpx;
			height:472rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			margin:auto;
			padding:42rpx 0rpx 0 49rpx;
			text-align:center;
			display: flex;
			.inverst {
				font-size:22rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(109,114,120,1);
				margin-right:59rpx;
			}
			image {
				margin:auto;
				width: 98rpx;
				height: 98rpx;
			}
		}
</style>
